import { LitElement, css, html } from "lit";
import { type PropertyDeclarations } from "lit";
import { customElement } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { type TreeNode } from "./demo";

/**
 * @desc 演示节点
 */
@customElement("demo-node")
class DemoNode extends LitElement {
  static override styles = css`
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #value {
      background: blue;
      color: white;
      font-size: 1.75em;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #children {
      display: flex;
      gap: 8px;
    }
  `;

  static override properties: PropertyDeclarations = {
    data: { type: Object },
    baseValue: { type: Number },
    leftValue: { type: Number },
    rightValue: { type: Number },
  };

  declare shadowRoot: ShadowRoot;

  declare data: TreeNode;

  declare baseValue: number;

  declare leftValue: number;

  declare rightValue: number;

  constructor() {
    super();
    this.data = { left: undefined, right: undefined };
    this.baseValue = 0;
    this.leftValue = 0;
    this.rightValue = 0;
  }

  override render() {
    return html`
      <div id="value">
        ${this.leftValue}:${this.baseValue}:${this.rightValue}
      </div>
      <div id="children">
        ${when(
          this.data?.left,
          () =>
            html`<demo-node
              .data=${this.data.left}
              .baseValue=${this.baseValue}
              .leftValue=${this.leftValue}
            ></demo-node>`,
        )}
        ${when(
          this.data?.right,
          () =>
            html`<demo-node
              .data=${this.data.right}
              .baseValue=${this.baseValue}
              .rightValue=${this.rightValue}
            ></demo-node>`,
        )}
      </div>
    `;
  }

  override updated() {
    const valueEl = this.shadowRoot.querySelector("#value");
    valueEl?.animate([{ background: "yellow" }, { background: "blue" }], {
      duration: 1000,
      iterations: 1,
    });
  }

  override async scheduleUpdate() {
    await new Promise((resolve) => {
      setTimeout(resolve, 100);
    });
    super.scheduleUpdate();
  }
}

// DemoNode.disableWarning?.('async-perform-update');
export { DemoNode };
